数组性能问题分析总结

点击上方「蓝字」关注我们

豆皮范儿们，今天我们来深入看几个与数组性能优化有关的case

数组的操作避免出现O(n^2)的复杂度

数组用来搜索元素的方法时间复杂度为O(n)。运行时间的增长速度与数据大小的增长速度相同，常用的如下

Array.prototype.every()Array.prototype.find()Array.prototype.findIndex()Array.prototype.forEach()Array.prototype.map()Array.prototype.reduce()Array.prototype.some()

如果将这些方法用在for循环内，或者两个方法嵌套使用，就会造成O(n^2)的复杂度，造成严重的性能问题。

Case 1 嵌套数组搜索操作

// bad case 嵌套了数组搜索操作const arrayA = Array.from({length: 10000}, (v, i) => i);const arrayB = Array.from({length: 10000}, (v, i) => i * 2);const result = arrayA.filter((v) => arrayB.every((u) => u !== v));

优化方法：使用Set或者Map方法进行数组的搜索操作

// good case 使用Set.has方法，代替Array.prototype.every()const arrayA = Array.from({length: 10000}, (v, i) => i);const arrayB = Array.from({length: 10000}, (v, i) => i * 2);const set = new Set(arrayB)const result = arrayA.filter((v) => !set.has(v));

二者的性能比较：数组大小为10000的时候，二者的性能差距已经有800倍左右

Case 2 concat的性能问题

const arrayA = Array.from({ length: 10000 }, (v, i) => i);const result = {};// bad case 每次concat都会新生产一个数组，会有较大的性能消耗arrayA.forEach((a) => { result.children = (result.children || []).concat(a);});// good case 复用已有的数组arrayA.forEach((a) => { if (result.children) { result.children.push(a); } else { result.children = [a]; }});

二者的性能比较：数组大小为10000的时候，二者的性能差距已经有1600倍

Case 3 创建数组操作的性能比较

几种创建10000个元素数组方法的速度比较

可以看到实际速度最快的还是for循环的方法，其它Array.from、解构等一行实现的方法，实际速度并不快

在线JS性能比较平台

在线比较两段代码的性能，以每秒执行次数（ops/s）为指标 https://jsbench.me

The     End

如果你觉得这篇文章对你有帮助，有启发，我想请你帮我2个小忙：

1、点个「在看」，让更多的人也能看到这篇文章内容；

2、关注公众号「豆皮范儿」，公众号后台回复「加群」 加入我们一起学习；

关注公众号的福利持续更新，公众号后台送学习资料：

1、豆皮范儿后台回复「vis」，还可以获取更多可视化免费学习资料。

2、豆皮范儿后台回复「webgl」，还可以获取webgl免费学习资料。

3、豆皮范儿后台回复「算法」，还可以获取算法的学习资料。

4、豆皮范儿后台回复「招聘」，获取各种内推。

字节跳动数据平台前端团队，在公司内负责大数据相关产品的研发。我们在前端技术上保持着非常强的热情，除了数据产品相关的研发外，在数据可视化、海量数据处理优化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和积累，有兴趣可以与我们联系。

投递简历，更多精彩文章，欢迎关注 “豆皮范儿” 

点个赞，证明你还爱我